<template>
	<el-splitter>
		<el-splitter-panel size="80%">
			<preview ref="previewRef" :data="data"></preview>
		</el-splitter-panel>
		<el-splitter-panel>
			<Codemirror style="height: 100%" :extensions="extensions" v-model="jsonString"></Codemirror>
		</el-splitter-panel>
	</el-splitter>
	<button @click="getData" style="position: fixed; bottom: 40px; left: 20px">获取数据</button>
</template>
<script setup>
import { computed, ref } from "vue";
import "@wdy90/survey/preview.css";
import { preview } from "@wdy90/survey";
import jsonData from "@/assets/data.json";
import { json } from "@codemirror/lang-json";
import { Codemirror } from "vue-codemirror";
import { EditorView } from "@codemirror/view";
import { lineNumbers } from "@codemirror/view";
import { oneDark } from "@codemirror/theme-one-dark";
let data = ref(jsonData);

const previewRef = ref(null);

const jsonString = computed({
	get() {
		if (data) {
			return JSON.stringify(data.value, null, 2); // 将 JSON 对象转换为 JSON 字符串
		}
	},
	set(newValue) {
		try {
			console.log(data.value);
			data.value = JSON.parse(newValue); // 尝试将新的字符串解析为 JSON 对象
		} catch (error) {
			console.error("Invalid JSON:", error);
			// 处理错误，例如显示错误信息
		}
	}
});

function getData() {
	console.log(previewRef?.value?.getData());
}

const extensions = [json(), oneDark, lineNumbers(), EditorView.lineWrapping]; // 设置代码编辑器的扩展
</script>
